<template>
    <div id="two-l">
      <div class="two-l-1 two-l-0">
        <ul class="index-ul">
            <div class="top-s" style="font-size: 14px;">今日通行</div>
            <div class="set-con set-flex">
                <div class="two-li">
                    <li v-for="(item , index) in dataList" :key="index">
                        <div class="two-l-1-n">
                            <span :style="{ color: item.sizeColor }" style="height: 3px;font-size: 30px;">{{item.num}}</span>
                            <div class="icon-s">
                                <img :src="item.srcImg" />
                            </div>
                            <p>{{ item.title }}</p>
                        </div>
                    </li>
                </div>
            </div>
        </ul>
      </div>
  
      <div class="two-l-4 two-l-0">
        <ul class="index-ul char">
            <div class="top-s" style="font-size: 14px;">来访人数趋势图</div>
            <div class="set-con">
                <div :style="fontSizeFun" class="two-l-4-echarts" ref="reachRefOne"></div>
            </div>
        </ul>
      </div>
  
      <div class="two-l-4 two-l-0">
        <ul class="index-ul char">
            <div class="top-s" style="font-size: 14px;">访客高低峰人流趋势图</div>
            <div class="set-con">
                <div :style="fontSizeFun" class="two-l-4-echarts" ref="reachRefTwo"></div>
            </div>
        </ul>
      </div>
    </div>
  </template>
  
  <script>
  import bz from './img/bz.png'
  import * as echarts from 'echarts'
  export default {
    name: 'two-l',
    data() {
      return {
          dataList: [{
              num: '23982', srcImg: bz , title: '总通行人数' , sizeColor: '#00E5FF'
          },{
              num: '18359', srcImg: bz , title: '员工' , sizeColor: '#00E5FF'
          },{
              num: '5623', srcImg: bz , title: '访客' , sizeColor: '#00E5FF'
          }]
      };
    },
    components: {},
    mounted() {
      let that = this
      that.$nextTick(() => {
          that.fontSizeFun(14)
          that.initChartsOne()
          that.initChartsTwo()
      })
    },
    methods: {
      fontSizeFun(val,initWidth=1920){
          const nowClientWidth = document.documentElement.clientWidth
          return val * (nowClientWidth/initWidth) + 'px'
      },
      initChartsOne(){
          let myChart = echarts.init(this.$refs.reachRefOne)
          window.addEventListener('resize',() => {
            myChart.resize()
          })
          let option = {
              tooltip : {
                  trigger: 'axis',
                  axisPointer: {
                      type: 'line',
                      label: {
                          backgroundColor: '#6a7985'
                      }
                  }
              },
              legend: {
                  show: true,
                  data:['访客','白名单'],
                  top: '5%',
                  orient: 'horizontal',
                  icon: 'circle',
                  textStyle:{
                      color: '#FFFFFF',
                  }
              },
              grid: {
                  left: '3%',
                  right: 10,
                  bottom: 4,
                  top: 40,
                  containLabel: true,
                  borderColor: 'rgb(61,61,61)'
              },
              xAxis: {
                  type: 'category',
                  boundaryGap : true,
                  // position: 'bottom',
                  // data: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15'],
                  data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
                  axisLine: {
                      show: true,
                      lineStyle: {
                          color: 'rgba(255,255,255,0.4)'
                      }
                  },
                  axisTick: {
                      show: false,
                  },
                  axisLabel: {
                      show: true,
                      color: "rgba(255,255,255,1)",
                      margin: 10,
                  },
                  splitLine: {
                      show: false,
                      lineStyle: {
                          color: "rgba(255,255,255,0.06)"
                      }
                  }
              },
              yAxis: {
                  type: 'value',
                  min: '0',
                  max: '40',
                //   interval: 500,
                  axisTick: {
                      show: false,
                  },
                  axisLabel: {
                     color: "rgba(255,255,255,1)"
                  },
                  axisLine: {
                      show: false,
                  },
                  splitLine: {
                      show: true,
                      lineStyle: {
                          color: "rgba(255,255,255,0.14)"
                      }
                  },
                  splitArea:{
                      show: false,
                      areaStyle:{
                          color: 'rgba(255,255,255,0.02)',
                      }
                  },
              },
              series: [
                  {
                      name: '访客',
                      // data: [480, 520, 630, 310,460, 570, 690,480, 520, 630, 310,460, 570, 690,570],
                      data: [5, 10, 15, 20,15, 30, 25,37, 20, 25, 30,15],
                      type: 'line',
                      showBackground: true,
                      showSymbol: false,
                      smooth: true,
                      backgroundStyle: {
                          color: 'rgba(255,255,255,0.1)'
                      },
                      barWidth:'20%',
                      label: {
                          show: false,
                          // position: 'left',
                          offset: [],
                          formatter: '{c}%',
                          textStyle: {
                              color: '#14E0FF',
                              // fontSize: 14,
                          }
                      },
                      itemStyle: {
                          normal: {
                              color:'#009ADF',
                          }
                      },
                      lineStyle: {
                          color: '#009ADF',
                      },
                      areaStyle: {
                          normal: {
                              color: new echarts.graphic.LinearGradient( 0, 0, 0, 1,[
                                  {
                                      offset: 0, 
                                      color: 'rgba(0,154,223,0.4)'
                                  },
                                  {
                                      offset: 1, 
                                      color: 'rgba(0,154,223,0)'
                                  }
                              ]),
                          }
                      },
                  },
                  {
                      name: '白名单',
                      data: [10, 15, 20, 15,25, 30, 25,15, 10, 5, 15,20],
                      type: 'line',
                      showBackground: true,
                      showSymbol: false,
                      smooth: true,
                      backgroundStyle: {
                          color: 'rgba(255,255,255,0.1)'
                      },
                      barWidth:'20%',
                      label: {
                          show: false,
                          // position: 'left',
                          offset: [],
                          formatter: '{c}%',
                          textStyle: {
                              color: '#14E0FF',
                              // fontSize: 14,
                          }
                      },
                      itemStyle: {
                          normal: {
                              color: '#00E5FF',
                          }
                      },
                      lineStyle: {
                          color: '#00E5FF',
                      },
                      areaStyle: {
                          normal: {
                              color: new echarts.graphic.LinearGradient( 0, 0, 0, 1,[
                                  {
                                      offset: 0, 
                                      color: 'rgba(0,229,255,0.4)'
                                  },
                                  {
                                      offset: 1, 
                                      color: 'rgba(0,229,255,0)'
                                  }
                              ]),
                          }
                      },
                  }
              ]
          }
          return option && myChart.setOption(option)
      },
      initChartsTwo(){
          let myChart = echarts.init(this.$refs.reachRefTwo)
          window.addEventListener('resize',() => {
              myChart.resize()
          })
          let option = {
              tooltip : {
                  trigger: 'axis',
                  axisPointer: {
                      type: 'line',
                      label: {
                          backgroundColor: '#6a7985'
                      }
                  }
              },
              legend: {
                  show: true,
                //   data:['访客'],
                  top: '5%',
                  orient: 'horizontal',
                  icon: 'circle',
                  textStyle:{
                      color: '#FFFFFF',
                  }
              },
              grid: {
                  left: '3%',
                  right: 10,
                  bottom: 4,
                  top: 40,
                  containLabel: true,
                  borderColor: 'rgb(61,61,61)'
              },
              xAxis: {
                  type: 'category',
                  boundaryGap : true,
                  data: ['0-1时','2-3时','4-5时','6-7时','8-9时','10-11时','12-13时','14-15时','16-17时','18-19时','20-21时','22-23时','0时'],
                  axisLine: {
                      show: true,
                      lineStyle: {
                          color: 'rgba(255,255,255,0.4)'
                      }
                  },
                  axisTick: {
                      show: false,
                  },
                  axisLabel: {
                      show: true,
                      color: "rgba(255,255,255,1)",
                      margin: 10,
                  },
                  splitLine: {
                      show: false,
                      lineStyle: {
                          color: "rgba(255,255,255,0.06)"
                      }
                  }
              },
              yAxis: {
                  type: 'value',
                  min: '0',
                  max: '20',
                //   interval: 500,
                  axisTick: {
                      show: false,
                  },
                  axisLabel: {
                     color: "rgba(255,255,255,1)"
                  },
                  axisLine: {
                      show: false,
                  },
                  splitLine: {
                      show: true,
                      lineStyle: {
                          color: "rgba(255,255,255,0.14)"
                      }
                  },
                  splitArea:{
                      show: false,
                      areaStyle:{
                          color: 'rgba(255,255,255,0.02)',
                      }
                  },
              },
              series: [
                {
                    // name: '访客',
                    data: [0, 0, 15, 10, 0, 0, 10, 0, 20, 10, 3,0],
                    type: 'line',
                    showBackground: true,
                    showSymbol: false,
                    smooth: true,
                    backgroundStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    },
                    barWidth:'20%',
                    label: {
                        show: false,
                        // position: 'left',
                        offset: [],
                        formatter: '{c}%',
                        textStyle: {
                            color: '#14E0FF',
                            // fontSize: 14,
                        }
                    },
                    itemStyle: {
                        normal: {
                            color:'#00E5FF',
                        }
                    },
                    lineStyle: {
                        color: '#00E5FF',
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient( 0, 0, 0, 1,[
                                {
                                    offset: 0, 
                                    color: 'rgba(0,229,255,0.4)'
                                },
                                {
                                    offset: 1, 
                                    color: 'rgba(0,229,255,0)'
                                }
                            ]),
                        }
                    },
                }
              ]
          }
          return option && myChart.setOption(option)
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  ::-webkit-scrollbar{
      width: 2px;
      height: 2px;
  }
  ::-webkit-scrollbar-track {
      background: rgba($color: #f3f4f9, $alpha: 0.1);
      border-radius: 2px;
  }
  ::-webkit-scrollbar-thumb {
      background: rgba($color:  #c8d2e0, $alpha: 0.1);
      border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb:hover {
      background: rgba($color:   #b4b4b4, $alpha: 0.1);
  }
  ::-webkit-scrollbar-corner {
      background: rgba($color:    #c8d2e0, $alpha: 0.1);
  }
  // 火狐
  * {
      scrollbar-color: #c8d2e0 #f3f4f9;
      /* 滑块颜色  滚动条背景颜色 */
      scrollbar-width: thin;
      /* 滚动条宽度有三种：thin、auto、none */
  }
  .set-con{
      width: 100%;
      height: 78%;
      overflow: hidden;
  }
  .set-con:hover{
      overflow: hidden;
  }
  .set-flex{
      display: flex;
      justify-content: center;
      flex-direction: column;
  }
  
  #two-l{
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      height: 100%;
      ul{
          margin: 0;
          padding: 0;
      }
      li{
          margin: 0;
          padding: 0;
          list-style: none;
      }
      .two-l-0{
          // margin-bottom: 10px;
          height: 32.7%;
      }
      .char{
          height: 100%;
          .two-l-4-echarts{
              width: 100%;
              height: 100%;
          }
      }
      .index-ul{
          background: rgba($color: #005ABF, $alpha: 0.2);
          width: 100%;
          height: 100%;
          padding-bottom: 10px;
          .top-s{
              padding: 10px 0 10px 10px;
              font-weight: 600;
              // font-size: 14px;
              font-style: oblique;
              background: rgba($color: #005ABF, $alpha: 0.4);
          }
          // 安全生产天数
          .two-li{
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              li{
                  width: 32%;
                  img{
                      display: block;
                      margin: auto;
                      width: 75%;
                  }
              }
              .two-l-1-n{
                  span{
                      display: block;
                      width: 100%;
                      text-align: center;
                      // font-size: 14px;
                      font-weight: 600;
                      margin-top:10px;
                  }
                  p{
                      width: 100%;
                      text-align: center;
                      margin-top: 8px;
                      // font-size: 14px;
                  }
              }
          }
  
          // 人员信息
          .index-r{
              display: flex;
              justify-content: space-between;
              flex-direction: row;
              align-items: center;
              width: 96%;
              border: 1px solid rgb(2,123,236);
              margin: 10px auto 0 auto;
              .index-r-title{
                  width: 30%;
                  span{
                      display: block;
                      color: #00E5FF;
                      font-size: 14px;
                      font-weight: 600;
                      font-style: oblique;
                      width: 100%;
                      text-align: center;
                      background: rgb(8 ,70 ,143);
                      padding: 5px 0;
                  }
                  p{
                      width: 100%;
                      font-size: 14px;
                      text-align: center;
                      background: rgb(3 ,44 ,90);
                      padding: 5px 0;
                      .index-r-p{
                          font-weight: 600;
                          margin-left: 4px;
                      }
                  }
              }
              .index-r-s{
                  width: 30%;
                  span{
                      display: block;
                      width: 100%;
                      text-align: center;
                      i{
                          color: #00FF28;
                          margin-left: 4px;
                      }
                  }
              }
              .line{
                  width: 1px;
                  height: 24px;
                  background: linear-gradient(to top, rgba($color: #0A275D, $alpha: 0) 0%,#00E5FF 50%, rgba($color: #0A275D, $alpha: 0) 100%);
              }
          }
      }
  }
  </style>